<template>
    <div class="container">
        <slot></slot>
        <Teleport to="body">
            <div 
                class="menu" 
                v-if="props.location.visible"
                :style="{left: props.location.x.value + 'px', top: props.location.y.value + 'px'}">
                <div v-for="item in props.menuItems" :key="item">
                   {{props.location.x}} - {{props.location.visible}} - {{item.label}}
                </div>
            </div>
        </Teleport>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    menuItems: {
        type: Array,
        required: true
    },
    location: {
        type: Object,
        required: true
    }
})
</script>

<style scoped>
.menu {
 position: fixed;
 width: 100px;
 border: 1px solid #ccc;
 padding: 10px 30px;
}
</style>
